<template>
  <!-- 待审核商品 -->
  <div>

    <h2>待审核商品</h2>
    <el-table border :data="data">
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column prop="title" label="标题" show-overflow-tooltip width="120"></el-table-column>
      <el-table-column prop="commodity" label="商品名称" show-overflow-tooltip width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="60"></el-table-column>
      <el-table-column prop="inventory" label="库存" width="60"></el-table-column>
      <el-table-column prop="type" label="类型" width="80"></el-table-column>
      <el-table-column prop="img" label="图片" show-overflow-tooltip>
        <template slot-scope="scope">
          <img v-for="i in scope.row.img.split(',')" :key="i" :src="require(`../../../../item-server/router/components/commodity/${i}`)" alt="" width="60px">
        </template>
      </el-table-column>
      <el-table-column prop="ShopId" label="所属店铺" width="80"></el-table-column>
      <el-table-column prop="state" label="商品状态" width="100"></el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
            <!-- <el-button @click="getDetail(scope.row.id)" type="info">详情</el-button> -->
            <el-button @click="changeState(scope.row.id, 1)" :disabled="scope.row.state!='审核中'" type="success">通过</el-button>
            <el-button @click="changeState(scope.row.id, 0)" :disabled="scope.row.state!='审核中'" type="warning">不通过</el-button>
         </template>
      </el-table-column>
    </el-table>
    <div v-if="pages" class="page">
      <span @click="back" disabled="now==1">&lt;</span>
      <span v-for="p in pages" :key="p" @click="changePno(p)" :class="{active: p==now}">{{p}}</span>
      <span @click="next" disabled="now==pages">&gt;</span>
    </div>
  </div>
</template>
<script>
///showgoods
export default {
  data() {
    return {
      data: null,
      //state:''
      now: 1,//当前页
      pages: '',//总页数
      count: 5, //每页显示数据量
      allData: null
    }
  },

  mounted(){
    this.getData(this.now, this.count, data=>{
      this.data = data
    })
    //获取全部数据量
    this.getAll()
  },
  methods:{
    //获取全部商品id
    getAll(){
      this.axios.get('/commodity/allUnapprove').then(res=>{
        this.allData = res.data
        this.pages = Math.ceil(res.data.length/this.count)//向上取整
        //console.log('总页数'+this.pages);
      })
    },

    /****
     * 获取商品数据
     * 参数 pno count callback回调
     * ****/
    getData(pno,count,callback){
      this.axios.get(`/commodity/showUnapprove?pno=${pno}&size=${count}`).then(res=>{
        callback(res.data)
      })
    },
    //审核（'审核通过' '审核不通过'）
    changeState(id, state){
     let url = `/commodity/approve?id=${id}&state=${state}`
      this.axios.put(url).then(res=>{
        if(res.data.code ==200){
           this.$message({
            message: '操作成功!',
            type: 'success'
           });
           //console.log(res)
           this.getData(this.now, this.count,data=>{
            this.data = data
           })
        }else{
            this.$message.error('操作失败！');
        }
      }) 
    },
    //切换页码
    changePno(p){
      this.now = p
      //console.log('切换页码,当前页是：'+p);
      this.getData(p, this.count, data=>{
        this.data = data
      })
    },
    //上一页
    back(){
      
      if(this.now >1){
        let p = this.now--
         this.getData(p, this.count, data=>{
          this.data = data
         })
      }
    },
    //下一页
    next(){
      
      if(this.now<this.pages){
        let p = this.now++
        this.getData(p, this.count, data=>{
          this.data = data
        })
      }
    }

  }
  
}
</script>
<style lang="scss" scoped>
  .page{
    user-select: none;
    background-color: #eee;
    padding: 10px;
    display: flex;
    span{
      margin: 6px;
      border: 1px solid #777;
      color: #777;
      width: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      &.active{
        color: white;
        background-color: orange;
        border-color: orange;
      }
    }
  }
</style>